/**
 * 滚动广告窗
 * Demo: 注意一个为main, 一个为 sidePic
 * <div class="main ui-adside-main">
 * 		<div class="normal on">图片一</div>
 * 		<div class="normal">图片2</div>
 * 	</div>
 *  <ul class="sidePic ui-adside-side"><li class="on">1</li><li class="">2</li></ul>
 * 
 * 
 * @author wzf
 */
(function($){
    /**
     * 初始化，setting格式为:
     * 				timer : {integer} 自动滚动毫秒数，默认3秒
     * 				animation: {string} "v", "h", "none"
     */
	$.fn.adslide = function(settings){
		settings = jQuery.extend({
				auto:true,
				timer : 3000,
				main: '.ui-adside-main',
				sidePic: '.ui-adside-side',
				htmlTemplate : '',
				callback:function(){},
				itemWidth:600,
				itemHeight:300,
				interval:1000,
				animation:"h"
	    	}, settings);
	    return $(this).each(function() {
			$.fn.adslide.scroll($(this),settings);
    	});
	};
	/**
	 * 滚动
	 */
	$.fn.adslide.scroll = function($this, settings){
		$this.settings = settings;
		var _timer = settings.timer;
		var _main = settings.main;
		var _sidePic = settings.sidePic;
		var _auto = settings.auto;
		var _htmlTemplate = settings.htmlTemplate;
		var _callback = settings.callback;
		var _itemWidth = settings.itemWidth;
		var _itemHeight = settings.itemHeight;
		var _interval = settings.interval;
		var _animation = settings.animation;
		var _el = $(_main, $this);
		if(_animation == "h"){
			_el.width(_el.children().size()*_itemWidth);
		}
		
		
		// 选中第一个
		select($(_sidePic + ' li:eq(0)', $this));
		if(!_auto) {
			$(_sidePic + ' li', $this).hover(
			  function () {
			     select($(this));
			  },	  function () {
			  }
			);
		} else {
			$this['_timeout'] = setInterval(next, _timer);
			$(_sidePic + ' li', $this).hover(
					function () {
						select($(this));
						clearInterval($this['_timeout']);
					},	  function () {
						clearInterval($this['_timeout']);
						$this['_timeout'] = setInterval(next, _timer);
					}
			);
			
			$(_main + ' li', $this).hover(
					function () {
						clearInterval($this['_timeout']);
					},	  function () {
						clearInterval($this['_timeout']);
						$this['_timeout'] = setInterval(next, _timer);
					}
			);
		}
			
		/**
		 * 选中下一条，如果到最后，则选中第一个。
		 */
		function next(){
			var _current = $(_sidePic +' li.on', $this);
			_current = _current.next();
			if(_current.size() == 0)
				_current = $(_sidePic + ' li:first-child', $this);
			select(_current);

		}
		/**
		 * 选择下面数字，同时更新上面的图片
		 * @param {jQuery} Required jquery对象，需要变为选中的项，
		 */
		function select(_current) {
			if(_current){
				// 回调
				// 需要动态生成内容
				var _index = _current.index();
				if(_htmlTemplate) {
					var _mainWrap = $(_main + ' [htmlTemplate="true"]:eq('+_index+') ', $this);
					if(_mainWrap.attr("loaded") != "true") {
						_mainWrap.html(_htmlTemplate);
					}
					_mainWrap.attr("loaded", "true");
				}
				// 回调
				if(_callback)
					_callback(_current);
				
				_current.addClass("on");
				_current.siblings('li').removeClass("on");
				var _index = _current.index();
				_current = $(_main + '>li:eq(' + _index+ ')', $this);
			    _current.addClass('on');
				_current.siblings('li').removeClass("on");
				
				if(_animation != 'none'){
					var _el = $(_main, $this);
					_el.stop(true, false);
					
					
					var _cssName = _animation == "h" ? "left" :(_animation == "v" ? "top":"");
					var _cssValue = _animation == "h" ? _itemWidth :(_animation == "v" ? _itemHeight:"");
					var _orientation = _animation == "h" ? -1 : (_animation == "v" ? -1:1);
					var _option = {};
					_option[_cssName] = _orientation*_index*_cssValue;
					_el.animate(_option,_interval);
				}
				
			}
		  };
  };
})(jQuery);